<template>
  <div style="padding:15px">
    <!-- 条件查询的表单 -->
    <!--查询表单-->
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="讲师"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="searchObj.level" clearable placeholder="头衔">
          <el-option value="1" label="高级讲师"/>
          <el-option value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>

      <el-form-item label="入驻时间">
        <el-date-picker
          v-model="searchObj.joinDateBegin"
          placeholder="开始时间"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item label="-">
        <el-date-picker
          v-model="searchObj.joinDateEnd"
          placeholder="结束时间"
          value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 批量删除按钮 -->
    <el-button type="danger" @click="batchDel">批量删除</el-button>
    <!--
      查询讲师列表在页面中显示

     -->
    <el-table
      :data="teachers"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column
        prop="name"
        label="姓名"
        width="100"/>
      <el-table-column
        prop="level"
        label="讲师头衔"
        width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.level === 1 ? 'primary' : 'success'"
            disable-transitions>{{ scope.row.level===1?'高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="career"
        label="资历"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sort"
        label="排序"
        width="60"/>
      <el-table-column
        prop="joinDate"
        label="加入日期"
        width="150"/>
      <!-- scope.row:代表正在遍历显示的那一行数据的json对象 -->
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" class="delBtn" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页导航插件 -->
    <div style="text-align:center;margin-top:50px">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[2, 3, 4, 5,10,20]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

    </div>
  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
export default { // 相当于在vue对象中写代码
  data() {
    return {
      searchObj: {},
      teachers: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      checkedTeachers: []
    }
  },
  created() {
    // 查询讲师列表 将结果设置给teachers
    /*
      1、axios实例的创建(utils/request.js)
      2、api方法的归类提取(一类操作提取到一个文件中：讲师管理模块)(在 src/api/teacher.js  封装讲师模块的异步请求)
      3、需要使用请求结果的代码中引入api文件调用方法并解析结果使用
    */
    this.getPage()
  },
  methods: {
    // 批量删除按钮单击事件
    batchDel() {
      // 获取选中的多行的数据的id集合
      if (this.checkedTeachers.length === 0) {
        this.$message.warning('请选择要删除的讲师')
        return
      }
      const ids = []
      this.checkedTeachers.forEach(t => {
        ids.push(t.id)
      })
      // 提交批量删除的请求
      teacherApi.batchDelete(ids).then(r => {
        this.$message.success('批量删除成功')
        // 访问上一页的数据
        this.pageNum = this.pageNum - 1
        this.getPage()
      })
    },
    // 表格的复选框选中改变的回调时间
    handleSelectionChange(val) { // val代表 被选中的行的 json对象的集合
      // console.log(val)
      this.checkedTeachers = val
    },
    // 删除按钮单击事件
    handleDel(teacher) {
      console.log(teacher)
      this.$confirm(`此操作将永久删除讲师 【${teacher.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 提交异步删除的请求  确定删除
        teacherApi.delete(teacher.id).then(r => { // 表示异步请求响应成功了
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 页面中如果只剩下一条记录，并且 删除最后一条记录成功，修改页码为上一页的页码
          if (this.teachers.length === 1) {
            this.pageNum = this.pageNum - 1
          }

          // 删除成功后刷新页面
          this.getPage()
        })// 异步请求发出之后，后面的代码会正常执行
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑按钮单击事件
    handleEdit(teacher) {
      console.log(teacher)
    },
    // 查询表单的清空按钮的单击事件
    resetData() {
      // 清空条件
      this.searchObj = {}
      this.pageSize = 3
      this.pageNum = 1
      this.getPage()
    },
    // 查询表单的查询按钮的单击事件
    fetchData() {
      this.pageSize = 3
      this.pageNum = 1
      this.getPage()
    },
    // 当每页显示的记录条数pageSize改变时 回调
    handleSizeChange(val) { // 参数：改变后的记录条数
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getPage()
    },
    // 页码pageNum的值改变时  回调
    handleCurrentChange(val) { // 参数： 修改后的页码
      console.log(`当前页: ${val}`)
      this.pageNum = val
      // 当页码改变时  查询修改后的页码的分页数据显示
      this.getPage()
    },
    getPage() {
      teacherApi.getPage(this.pageNum, this.pageSize, this.searchObj).then(r => {
        // r.data.page分页对象：分页对象中的records属性携带了数据集合
        this.teachers = r.data.page.records
        // 获取分页查询的总记录条数
        this.total = r.data.page.total
      })
    },
    getTeachers() {
      // 异步请求是通过utils/request中的axios实例发起的
      // axios实例配置了响应拦截器，拦截了响应对象判断，如果R对象的code=20000就放行，放行的响应结果为原生的response对象的.data属性(R对象)
      teacherApi.getTeachers().then(r => { // r 就是响应的后端的R对象
        console.log(r)// vue练习中 通过axios发起异步请求得到的r对象是响应报文对象，但是现在却是 R对象
        this.teachers = r.data.items
      })
    }
  }
}
</script>
